<template>
  <div>
    <div>
      <el-card>
        <el-form
          :model="criteriaForm"
          ref="basisForm"
          :rules="rules"
          size="mini"
        >
          <!-- <el-row :gutter="30">
            <el-col :span="4.5">
              <el-form-item label="运单号" label-width="50px" prop="waybillNos">
                <el-input
                  size="large"
                  v-model="criteriaForm.waybillNoss"
                  type="textarea"
                  name="waybillName"
                  label-width="60px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4.5">
              <el-form-item label="客户" label-width="70px" prop="customerId">
                <el-select
                  size="mini"
                  v-model="criteriaForm.customerId"
                  style="width: 250px"
                >
                  <el-option
                    v-for="(item, value) in customerIds"
                    :key="value"
                    :label="item"
                    :value="value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="审核状态"
                label-width="70px"
                prop="bankStatementStatus"
              >
                <el-select
                  size="mini"
                  v-model="criteriaForm.bankStatementStatus"
                  style="width: 250px"
                >
                  <el-option
                    v-for="(item, value) in approvalStatus"
                    :key="value"
                    :label="item"
                    :value="value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4.5">
              <el-form-item label="销售" label-width="70px" prop="saleId">
                <el-select
                  size="mini"
                  v-model="criteriaForm.saleId"
                  style="width: 250px"
                >
                  <el-option
                    v-for="(item, value) in users"
                    :key="value"
                    :label="item"
                    :value="value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="开票状态"
                label-width="70px"
                prop="invoicestate"
              >
                <el-select
                  size="mini"
                  v-model="criteriaForm.invoicestate"
                  style="width: 250px"
                >
                  <el-option
                    v-for="(item, value) in invoiceStatus"
                    :key="value"
                    :label="item"
                    :value="value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4.5">
              <el-form-item label="名称" label-width="50px" prop="customerId">
                <el-input
                  type="text"
                  size="mini"
                  v-model="criteriaForm.customerId"
                  style="width: 250px"
                />
              </el-form-item>
              <el-form-item label="备注" label-width="50px" prop="customerId">
                <el-input
                  type="text"
                  size="mini"
                  v-model="criteriaForm.customerId"
                  style="width: 250px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2" class="right">
              <el-button
                size="mini"
                type="primary"
                @click="balanceDetailList"
                style="margin-left: 10px"
                >搜索</el-button
              > -->
              <!-- <el-button size="mini" @click="reset" style="margin-top: 20px"
                >重置</el-button
              > 
            </el-col>
          </el-row>-->
        </el-form>
      </el-card>
    </div>

    <div>
      <el-card>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.criteriaForm.currentPage"
            :page-sizes="[20, 40, 60, 80, 100]"
            :page-size="20"
            :total="this.count"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
        <el-table :data="billColumns" style="width: 100%" size="mini">
          <el-table-column type="selection" width="30"> </el-table-column>
          <el-table-column width="100" property="customerId" label="客户">
          </el-table-column>
          <el-table-column width="100" prop="saleId" label="销售">
          </el-table-column>
          <el-table-column width="250"  label="账单名">
          <template  slot-scope="scope">
            <a :href="value" @click="showDialog(scope.row.id)">
                   {{scope.row.name}}
             </a>
          </template>
         </el-table-column>
          <el-table-column
            width="100"
            property="bankStatementStatus"
            label="审核状态"
          >
          </el-table-column>
          <el-table-column width="100" property="totalMoney" label="总金额">
          </el-table-column>
          <el-table-column
            width="100"
            property="hasopenAccount"
            label="已开金额"
          >
          </el-table-column>
          <el-table-column
            width="100"
            property="notopenAccount"
            label="未开金额"
          >
          </el-table-column>
          <el-table-column width="100" property="applyaccount" label="申请金额">
          </el-table-column>
          <el-table-column width="100" property="invoicetype" label="开票状态">
          </el-table-column>
          <el-table-column width="100" property="remark" label="备注">
          </el-table-column>
          <el-table-column width="100" property="creator" label="创建人">
          </el-table-column>
          <el-table-column width="100" property="createTime" label="创建时间">
          </el-table-column>
          <el-table-column width="300">
            <template slot="header" slot-scope="scope">
              <span>操作</span>
            </template>
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status === 'a'"
                type="text"
                icon="el-icon-position"
                size="mini"
                @click="dialogFormSave = true"
                circle
              ></el-button>
              <el-tooltip
                content="上传水单"
                placement="bottom-start"
                effect="light"
              >
                <el-button
                  style="margin-right: -5px"
                  icon="el-icon-position"
                  size="mini"
                  @click="billFindbyId(scope.row.id, scope.row)"
                  circle
                />
              </el-tooltip>
              <el-tooltip
                content="上传水单"
                placement="bottom-start"
                effect="light"
              >
                <el-button
                  style="margin-right: -5px"
                  icon="el-icon-picture-outline"
                  size="mini"
                  @click="billFindbyId(scope.row.id, scope.row)"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip
                content="申请开票"
                placement="bottom-start"
                effect="light"
              >
                <el-button
                  style="margin-right: -5px"
                  icon="fa fa-ticket-alt"
                  size="mini"
                  @click="applyinvoice(scope.row.id)"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip
                content="开发票"
                placement="bottom-start"
                effect="light"
              >
                <el-button
                  style="margin-right: -5px"
                  icon="fa fa-ticket-alt"
                  size="mini"
                  @click="applyinvoice(scope.row.id)"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip
                content="重命名"
                placement="bottom-start"
                effect="light"
              >
                <el-button
                  style="margin-right: -5px"
                  icon="fa fa-wrench"
                  size="mini"
                  @click="rename(scope.row.id)"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip
                content="编辑"
                placement="bottom-start"
                effect="light"
              >
                <el-button
                  style="margin-right: -5px"
                  icon="el-icon-edit"
                  size="mini"
                  @click="dialogFormVisible = true"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip
                content="导出excel账单"
                placement="bottom-start"
                effect="light"
              >
                <el-button
                  style="margin-right: -5px"
                  icon="fa fa-file-excel"
                  size="mini"
                  @click="dialogFormVisible = true"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip
                content="导出pdf账单"
                placement="bottom-start"
                effect="light"
              >
                <el-button
                  style="margin-right: -5px"
                  icon="fa fa-file-pdf"
                  size="mini"
                  @click="dialogFormVisible = true"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip
                content="删除账单"
                placement="bottom-start"
                effect="light"
              >
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  @click="
                    balanceDetailDelete(scope.row.id, scope.row, scope.$index)
                  "
                  circle
                />
              </el-tooltip>
              <!-- <el-tooltip content="删除账单" placement="bottom-start" effect="light" >
                           <el-button icon="s" size="mini" @click="balanceDetailDelete(scope.row.id,scope.row, scope.$index)" circle/>
                </el-tooltip> -->

              <!-- <i class="el-icon-edit pointer text-red" @click="dialogFormSave = true" style="color:origin"></i>
                  <i class="el-icon-share pointer"  @click="test" ></i>
                  <i class="el-icon-delete"></i> -->
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <el-dialog title="上传水单" :visible.sync="dialogFormSave" width="40%">
      <el-form :model="billForm" label-width="70px" size="mini">
        <el-form :model="balanceDetailForm" label-width="70px" size="mini">
          <el-row :gutter="30">
            <el-col :span="24">
              <el-form-item label="账单备注">
                <el-input
                  size="mini"
                  v-model="balanceDetailForm.remark"
                  type="text"
                  name="remark"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="账单总额">
                <span>{{ balanceDetailForm.totalMoney }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账单余额">
                <span>{{ balanceDetailForm.money }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="水单">
                <!-- <span><a href=""></a>{{ balanceDetailForm.money }}</span> -->

                <span
                  v-for="(
                    item, index
                  ) in balanceDetailForm.saleCustomerBillMemos"
                  :key="item.id"
                  ><el-link type="primary" :href="item.memoImgUrl">
                    水单{{ index + 1 }} &nbsp; </el-link
                  ><i class="el-icon-close" @click.stop="deleteMemo(item.id)" />
                </span>

                <!-- <el-button style="margin-right:-5px;" icon="el-icon-close" size="mini" @click="deleteMemo(item.id)" circle/>
                          <i class="el-icon-close"  @click.stop="" /> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="30">
          <!-- <el-col :span="8">
            <el-form-item label="水单金额"  >
              <el-input v-model="billForm.applyaccount" autocomplete="off" style="width: 150px;" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="币种" label-width="70px" prop="currency">
                            <el-select v-model="billForm.currency" size="mini" style="width: 150px;" >
                              <el-option
                                      v-for="(item, value) in currencys"
                                        :key="value"
                                        :label="item"
                                        :value="value"
                                        >
                              </el-option >
                          </el-select>
                  </el-form-item>
          </el-col>
          <el-col :span="8">
           <el-upload
                  class="upload-demo"
                  action="#"
                  :http-request="uploadFn"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                    multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="mini" type="primary">点击上传</el-button>
                   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
          </el-col> -->
          <el-col>
            <el-table
              size="mini"
              :data="billForm.saleCustomerBillMemos"
              label-width="0px"
            >
              <el-table-column prop="cdate" label="水单日期">
                <template slot-scope="scope">
                  <el-date-picker
                    size="mini"
                    v-model="scope.row.cdate"
                    style="width: 150px"
                  ></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="currency" label="币种">
                <!-- <template slot-scope="scope"> -->
                <!-- <el-form-item label-width="110px" prop="currency"> -->
                <el-select
                  v-model="billForm.currency"
                  size="mini"
                  style="width: 100px"
                >
                  <el-option
                    v-for="(item, value) in currencys"
                    :key="value"
                    :label="item"
                    :value="value"
                  >
                  </el-option>
                </el-select>
                <!-- </el-form-item> -->
                <!-- </template> -->
              </el-table-column>
              <el-table-column prop="bankStatementAmount" label="水单金额">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.bankStatementAmount"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="memoImgUrl" label="水单">
                <template slot-scope="scope">
                  <el-upload
                    class="image-upload-pic"
                    ref="upload"
                    action="fakeaction"
                    :show-file-list="false"
                    :http-request="uploadFn"
                  >
                    <!-- <el-upload
                            class="upload-demo"
                            action="#"
                            :http-request="uploadFn"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                              multiple
                            :limit="3"
                            :on-exceed="handleExceed"
                            :file-list="fileList"> -->
                    <el-button
                      size="mini"
                      type="primary"
                      @click="selectTd(scope.$index)"
                      >点击上传</el-button
                    >
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="3">
            <el-button
              style="margin-right: -5px"
              icon="el-icon-plus"
              size="mini"
              @click="add"
              circle
            />
            <el-button
              style="margin-right: -5px"
              icon="el-icon-minus"
              size="mini"
              @click="del"
              circle
            />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormSave = false">取 消</el-button>
        <el-button type="primary" @click="uploadBillMemoSave()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="重命名" :visible.sync="dialogFormRenameBill" width="40%">
      <el-form :model="balanceDetailForm" label-width="70px" size="mini">
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="名称">
              <el-input
                size="mini"
                v-model="balanceDetailForm.name"
                type="text"
                name="name"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-form :model="balanceDetailForm" label-width="70px" size="mini">
          <el-button @click="dialogFormRenameBill = false">取 消</el-button>
          <el-button type="primary" @click="renamebill(balanceDetailForm.id)"
            >确 定</el-button
          >
        </el-form>
      </div>
    </el-dialog>
    <!-- 点击账单名展示的列表-->
    <el-dialog
      :title="billTitle"
      :visible.sync="dialogTableVisible"
      width="75%"
    >
      <p style="font-size: 14px">
        <strong
          >账单总应收：{{ totalCost }} {{ standradCurrency }}， 余额：{{
            totalRemain
          }}
          {{ standradCurrency }}</strong
        >
      </p>
      <div style="height: 550px" class="scrollbar">
        <el-scrollbar style="height: 100%">
          <el-table class="text-sm" :data="tableData">
            <el-table-column type="index" label="序号" />
            <el-table-column
              v-for="(item, index) in tableColumns"
              :key="index"
              :prop="item.prop"
              :label="item.label"
            />
          </el-table>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>
      <!-- 到此结束-->

<script>
import axios from "axios";
import { ajax } from "@/store/yg/common/utils";
import LoginVue from "../../../../yg/auth/Login.vue";
import * as constant from "@/store/yg/common/constant";
import { untransform } from "@/store/yg/common/uri";

export default {
  props: ["field"],
  data() {
    return {
      selectTdIndex: "",
      action: "",
      feeData: [],
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      flag: true,
      billTitle: "", //账单名称
      totalCost: "", //应收金额
      totalRemain: "", //余额
      standradCurrency: "",
      tableData: [],
      dialogTableVisible: false,
      tableColumns: [
        //点击账单名的列
        { prop: "waybillNo", label: "订单号" },
        { prop: "feeName", label: "费用名称" },
        { prop: "unitPrice", label: "单价" },
        { prop: "currency", label: "币种" },
        { prop: "count", label: "数量" },
        { prop: "totalCost", label: "总额" },
        { prop: "remain", label: "余额" },
        { prop: "accountDate", label: "费用时间" },
        { prop: "billTypeName", label: "账单类型" },
        { prop: "remark", label: "备注" },
      ],
      criteriaForm: {
        customerId: "",
        waybillNos: [],
        waybillNoss: [],
        bankStatementStatus: "",
        invoicestate: "",
        name: "",
        remark: "",
        saleId: "",
        currentPage: 0,
        pageSize: "",
      },
      balanceDetailForm: {
        //账单查询条件集合
        name: "",
        waybillNo: "",
        waybillId: "",
        serCusId: "",
        billType: "",
        costName: "",
        count: 0,
        unitPrice: "",
        currency: "",
        totalCost: [],
        remain: "",
        accountDate: "",
        remark: "",
        totalMoney: "",
        money: "",
        saleCustomerBillMemos: [
          { cdate: "", currency: "", bankStatementAmount: "", memoImgUrl: "" },
        ],
      },
      billForm: {
        //账单实体参数
        id: null,
        name: "",
        totalMoney: "",
        money: "",
        // saleCustomerBillId: null,
        // memoImgUrl: "",
        bankStatementAmount: "",
        applyaccount: "", //申请金额传水单金额
        currency: "",
        remark: "",
        saleCustomerBillMemos: [
          { cdate: "", currency: "", bankStatementAmount: "", memoImgUrl: "" },
        ],
      },
      billFormList: [
        {
          //账单集合
          id: "",
          name,
          totalMoney: "",
          money: "",
          saleCustomerBillId: "",
          memoImgUrl: "",
          bankStatementAmount: "",
          applyaccount: "", //申请金额传水单金额
          currency: "",
          remark: "",
        },
      ],
      rules: {
        customerId: [
          { required: true, message: "请选择客户", trigger: "blur" },
        ],
      },
      billColumns: [],
      customerIds: [],
      users: [],
      approvalStatus: [],
      invoiceStatus: [],
      costNames: [],
      currencys: [],
      count: 0, //账单数量
      dialogFormVisible: false,
      dialogFormRenameBill: false,
      dialogFormSave: false,
    };
  },
  mounted() {
    this.balanceDetailList();
    // this.queryResults();
  },
  created: function () {
    this.action =
      constant.API_SERVER +
      "/api/consume/upload?uri=" +
      untransform(this.$route.params.uri) +
      "&f=uploadImage&type=blank&name=sub&id=" +
      this.$store.state.edit.id;
  },
  methods: {
    async showDialog(id) {
      //点击账单名
      this.billTitle = this.billForm.name + " 费用明细";
      this.dialogTableVisible = true;
      if (id !== null) {
        const data = {};
        data["id"] = id;
        let res = await ajax("findByIdBillInfo", data);
        this.tableData = res.waybillReceiveDetails;
      }
    // ajax("findByIdBillInfo", data).then(
    //   (res) => {
    //     debugger;
    //           console.log(res);
    //           if (res.code != 200) {
    //             this.$message.error("上传水单失败");
    //           } else {
    //             this.$message.success("成功");
    //             this.tableData = res.waybillReceiveDetails;
    //             console.log("tableData", tableData);
    //           }
    //         },
    //         (error) => {
    //           console.log(error);
    //         }
    //       );
    },
    handleCurrentChange(val) {
      //分页页数
      this.criteriaForm.currentPage = val;
      this.balanceDetailList();
    },
    handleSizeChange(val) {
      //每页条数
      this.criteriaForm.pageSize = val;
      this.balanceDetailList();
    },
    balanceDetailList() {
      if (this.criteriaForm.currentPage == "") {
        this.criteriaForm.currentPage = 1;
      }
      if (this.criteriaForm.pageSize == "") {
        this.criteriaForm.pageSize = 20;
      }
      if (this.criteriaForm.waybillNoss != "") {
        var textarea = this.criteriaForm.waybillNoss.split("\n");
        this.criteriaForm.waybillNos = textarea;
      }
      ajax("list", this.criteriaForm).then(
        (res) => {
          console.log(res);
          this.customerIds = res.customers;
          this.users = res.users;
          this.approvalStatus = res.approvalStatus;
          this.invoiceStatus = res.invoiceStatus;
          this.billColumns = res.bill;
          this.currencys = res.currencys;
          this.count = res.count;
        },
        (error) => {
          console.log(error);
        }
      );
    },
    add() {
      const data = this.billForm.saleCustomerBillMemos;
      data.push({
        cdate: "",
        currency: "",
        bankStatementAmount: "",
        memoImgUrl: "",
      });
      console.log("this.billForm.saleCustomerBillMemos", this.billForm);
      console.log(
        "this.billForm.saleCustomerBillMemos",
        this.billForm.saleCustomerBillMemos
      );
      this.$set(this.billForm, "saleCustomerBillMemos", data);
    },
    del() {
      const data = this.billForm.saleCustomerBillMemos;
      data.splice(data.length - 1);
      this.$set(this.billForm, "saleCustomerBillMemos", data);
    },
    selectTd(index) {
      this.selectTdIndex = index;
    },
    uploadFn(params) {
      const file = params.file,
        fileType = file.type,
        isImage = fileType.indexOf("image") != -1,
        isLt2M = file.size / 1024 / 1024 < 2;
      // 这里常规检验，看项目需求而定
      // if (!isImage) {
      //   this.$message.error("只能上传图片格式png、jpg、gif!");
      //   return;
      // }
      // if (!isLt2M) {
      //   this.$message.error("只能上传图片大小小于2M");
      //   return;
      // }
      // 根据后台需求数据格式
      const form = new FormData();
      // 文件对象
      // form.append("items[]", file);
      // 本例子主要要在请求时添加特定属性，所以要用自己方法覆盖默认的action
      // form.append("clientType", 'uploadImage');
      // 文件对象
      form.append("items[]", file);
      axios({
        method: "post",
        url: this.action,
        data: form,
      })
        .then((response) => {
          if (response.data.code != 200) {
            this.$notify.error({
              title: "错误",
              message: "上传失败!" + response.data.message,
            });
          } else {
            console.log(this.selectTdIndex);
            this.billForm.saleCustomerBillMemos[this.selectTdIndex].memoImgUrl =
              response.data.data["fileUrl"];
            console.log(this.billForm);
          }
        })
        .catch((error) => {
          console.log(error);
          this.$notify.error({
            title: "错误",
            message: "上传失败!",
          });
        });
      // 项目封装的请求方法，下面做简单介绍
      //  ajax("uploadImage", form).then(res => {
      //    //自行处理各种情况
      //     const code = res && parseInt(res.code, 10);
      //     if (code === 200) {
      //       // xxx
      //     } else {
      //       // xxx
      //     }
      //   }).catch(() => {
      //     // xxx
      //   });
    },
    changeData() {
      this.flag = !this.flag;
    },
    queryResults() {
      // if(this.criteriaForm.waybillNoss!=""){
      //   var textarea =  this.criteriaForm.waybillNoss.split("\n");
      //   this.criteriaForm.waybillNos = textarea;
      // }
      ajax("list", this.criteriaForm).then(
        (res) => {
          //  this.criteriaForm.waybillNos = this.criteriaForm.waybillNos.join("\n")
          console.log(res);
          this.columns = res.data;
          this.bill = res.bill;
        },
        (error) => {
          console.log(error);
        }
      );
    },
    uploadBillMemoSave() {
      //保存水单
      this.billForm.remark = this.balanceDetailForm.remark;
      this.billForm.id = this.balanceDetailForm.id;
      console.log(this.billForm);
      ajax("uploadBillMemo", this.billForm).then(
        (res) => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error("上传水单失败");
          } else {
            this.$message.success("上传水单成功");
            this.columns = res.data;
            console.log("this.columns", this.columns);
          }
        },
        (error) => {
          console.log(error);
        }
      );
      this.balanceDetailList(); //重新访问列表
      this.dialogFormSave = false; //隐藏上传窗口
    },
    billFindbyId(id, row) {
      //账单金额信息
      this.dialogFormSave = true; //显示上传窗口
      ajax("findByIdWithMemos", { id: id }).then(
        (res) => {
          this.balanceDetailForm = res;
          // this.balanceDetailForm.totalMoney = res.totalMoney;
          // this.balanceDetailForm.money;
          console.log(this.balanceDetailForm);
          // console.log(res);
        },
        (error) => {
          console.log(error);
        }
      );
    },
    applyinvoice(id, row) {
      //开发票
      console.log(id);
      //
      // this.$router.push({ path: '/blank/customer__balancedetail__main', params: { ids: id } })
      this.$store.dispatch(
        "loadBlankEntry",
        "#/blank/customer__billinvoice__main"
      );
      // this.$store.dispatch("loadBlankEntry","#/blank/waybill__airFreightList__main");

      // ajax("findbyid", {"id": id}).then(
      //   res => {
      //       this.balanceDetailForm = res;
      //       // this.balanceDetailForm.totalMoney = res.totalMoney;
      //       // this.balanceDetailForm.money;
      //       console.log(this.balanceDetailForm);
      //       // console.log(res);
      //   },
      //   error => {
      //     console.log(error);
      //   }
      // );
    },
    rename(id) {
      //账单重命名
      this.dialogFormRenameBill = true;
      ajax("findbyid", { id: id }).then(
        (res) => {
          this.balanceDetailForm = res;
          console.log(this.balanceDetailForm);
        },
        (error) => {
          console.log(error);
        }
      );
    },
    renamebill(id) {
      //账单名保存
      this.dialogFormRenameBill = false;
      this.billForm.id = id;
      this.billForm.name = this.balanceDetailForm.name;
      ajax("renameBill", this.billForm).then((res) => {
        if (res.code != 200) {
          this.$message.error("重命名失败");
        } else {
          this.$message.success("重命名成功");
        }
      });
      this.balanceDetailList(); //重新访问列表
    },
    deleteMemo(id) {
      //删除已有水单
      this.billForm.saleCustomerBillMemos[0].id = id;
      ajax("deleteMemo", this.billForm).then((res) => {
        if (res.code != 200) {
          this.$message.error("删除水单失败");
        } else {
          this.$message.success("删除水单成功");
        }
      });
      this.billFindbyId(this.balanceDetailForm.id);
    },
    balanceDetailDelete(id, row, i) {
      //删除账单
      console.log(row.id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          ajax("delete", { id: id }).then(
            (res) => {
              console.log(res);
              if (res.code != 200) {
                this.$message.error("删除失败");
              } else {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.balanceDetailList(); //重新访问列表
                // this.columns = res.data;
                // console.log('this.columns', this.columns);
              }
            },
            (error) => {
              console.log(error);
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

.left {
  float: left;
}

.right {
  float: right;
}

/deep/ .el-card {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
